<template>
  <el-container class="allpage">
      <el-row class="position-fixed">
      </el-row>
    <el-container>
      <el-aside class="shaoboaside2">
        <div class="shaoaside-content">
        <div class="shaoaside-left">
          <div>
            <div class="zuoce">
          <el-row :gutter="10">
            <el-col :span="8"><el-button type="primary"  plain @click="centerDialogVisible = true"  class="add_btn2" >输入手牌号</el-button></el-col>
            <el-col :span="6"><el-button type="primary"  plain @click="check"  class="add_btn2" >查询订单</el-button></el-col>
          </el-row>

          <el-row >
            <el-col :span="5">
              <div style="display: block;">
              <span  style="display: block; margin-top: 24px;"class="m1">手牌号:</span>
              </div>
            </el-col>
            <el-col :span="6">
              <el-input
              class="input"
              v-model="this.handbrandnumber"
              :disabled = "true"
              style="width: 100px; height: 40px;margin-left: -25px"
            ></el-input>
            </el-col>
          </el-row>
          </div>
          </div>
<!--          展示商品表格-->
          <div class="scroll1">
            <el-table
              :row-style="rowStyle"
              :cell-class-name="tableRowClassName"
              :show-header="false"
              :data="detailsList"
              empty-text = "玉泉宫"
              height="577"
              class="listtable1">
              <el-table-column
                prop="entryName"
                label="商品名称"
                width="180" align="center">
              </el-table-column>
              <el-table-column
                prop="quantity"
                label="购买数量" align="center">
                <template slot-scope="scope">
                  <div>{{ scope.row.quantity }}个</div>
                </template>
              </el-table-column>
              <el-table-column
                sortable
                label="消费金额" align="center">
                <template slot-scope="scope">
                  <div >{{ scope.row.totalAmount }}元</div>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot-scope="scope">
                  <el-button type="warning" plain @click="jianshao(scope.row.index)">减少</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button class="queren" type="primary" plain  @click.prevent.stop.native="table= true;getCurrentTime()">确认</el-button>
          <el-button class="queren" type="primary"  plain  @click.prevent.stop.native="reback">清空</el-button>
          </div>
<!--分类条-->
        <div class="shaoaside-right">
          <div>
            <div class="zhonglei">
            <el-card class="first" style="font-size: 18px" @click.prevent.stop.native="projectCateory04(1)">
              <span class="juzhong">饮料</span>
            </el-card>
            <el-card class="first2" style="font-size: 18px" @click.prevent.stop.native="projectCateory07(2)">
              <span class="juzhong">茶水</span>
            </el-card>
            <el-card class="first3" style="font-size: 18px" @click.prevent.stop.native="projectCateory05(3)">
              <span class="juzhong">香烟</span>
            </el-card>
            <el-card class="first4" style="font-size: 18px" @click.prevent.stop.native="projectCateory08(4)">
              <span class="juzhong">商品</span>
            </el-card>
              <el-card class="first5" style="font-size: 18px" @click.prevent.stop.native="projectCateory10(5)">
                <span class="juzhong">男浴服</span>
              </el-card>
              <el-card class="first6" style="font-size: 18px" @click.prevent.stop.native="projectCateorygirl(6)">
                <span class="juzhong">女浴服</span>
              </el-card>
            </div>

          </div>
        </div>
        </div>
      </el-aside>
<!--      商品展示-->
      <el-container>
        <el-main class="shaomain">
          <div class="zhanshi"
               v-loading="loading">
            <el-row
              class="button-list2"
              v-for="rows in branchDatayufugirl"
            >
              <el-col v-for="cols in rows" :span="8">
                <el-button plain
                           style="height: 123px;width: 216px;margin-top: 5px;padding: 0;"
                           type="primary"
                           class="buttondiandan"
                           @click.prevent.stop.native="handleAdddetail(cols.id)"
                >
                  <div>{{cols.entryName}}</div>
                  <div>{{cols.unitPrice}}元</div>
                </el-button>
              </el-col>
            </el-row>
          </div>
          <div>
            <el-row :gutter="7">
              <el-col :span="16"> <el-button  style="height: 123px;width: 216px;margin-top: 5px;margin-left:-20px;padding: 0; " class="buttondiandan" type="primary" plain  @click.prevent.stop.native="shangyiye">上一页</el-button></el-col>
              <el-col :span="6">  <el-button  style="height: 123px;width: 216px;margin-top: 5px;margin-left:-7px;padding: 0; "  class="buttondiandan" type="primary"  plain  @click.prevent.stop.native="xiayiye">下一页</el-button></el-col>
            </el-row>
          </div>

<!--          软键盘-->

          <el-dialog :visible.sync="centerDialogVisible"   width="90%"  :showClose="false"    center>
            <el-card class="shaocard">
            <div class="el-dialog-div1">
              <Verify @comfirm="hao" :inputName="this.handbrandnumber"></Verify>
            </div >
            </el-card>
          </el-dialog>
          <!--          打印小票-->
<!--          <div class="shaodrawer" style="z-index: -9999;position: fixed;top: -10000px;left: 0;width: 240mm">-->
<!--            <div class="drawerleft">-->
<!--              <div id="printAre" class="shaoxiaopiaocard" :data="detailsList" style="text-align: left" >-->
<!--                <div style="margin-top:10px;text-align: center" >-->
<!--                  玉泉宫欢迎您！-->
<!--                </div>-->
<!--                <div style="margin-top:6px;border-top: 4px solid #ccc;"></div>-->
<!--                <span style="float: left;">下单时间:{{currentDateTime}}</span>-->

<!--                <div style="margin-top:30px;border-top: 4px solid #ccc;"></div>-->
<!--                <span class="mingcheng">名称</span>-->
<!--                <span class="shuliang">数量</span>-->
<!--                <span style="float: right;">金额</span>-->
<!--                <div  v-for="rows in detailsList">-->
<!--                  <el-row :gutter="10">-->
<!--                    <el-col :span="16">-->
<!--                      <span >{{rows.entryName}}</span>-->
<!--                    </el-col>-->
<!--                    <el-col :span="2">-->
<!--                      <span >{{rows.quantity}}</span>-->
<!--                    </el-col>-->
<!--                    <el-col :span="2">-->
<!--                      <span class="xiaopiaocontent1">{{rows.totalAmount}}</span>-->
<!--                    </el-col>-->
<!--                  </el-row>-->
<!--                </div>-->
<!--                <div style="margin-top:10px;border-top: 4px solid #ccc;"></div>-->
<!--                <div class="dibu1">操作员:</div>-->
<!--                <div class="dibu1">地址:辽宁省锦州市凌河区靖东街杏花里13号玉泉宫温泉洗浴会馆</div>-->
<!--                <div class="dibu1">电话:1234567890</div>-->
<!--              </div>-->
<!--              </div>-->
<!--            </div>-->
          <el-dialog
            :visible.sync="open"
            :showClose="false"
            width="70%"
            center
          >
            <div class="shaotanchu1">
              商品已在列表中还需再点？
              <el-row>
                <el-col :span="12">
                  <el-button   style="float: left" class="shaobuttonqueding" type="danger" @click.prevent.stop.native="quxiao" plain >取消</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button   style="float: left" class="shaobuttonqueding" type="danger" @click.prevent.stop.native="queding" plain >确定</el-button>
                </el-col>
              </el-row>
            </div>
          </el-dialog>

<!--          抽屉-->
          <el-drawer
            style="font-size: 40px;text-align: center"
            title="请仔细核对订单！"
            :visible.sync="table"
            direction="ltr"
            size="60%"
            :showClose="false"
          >
            <el-table :data="detailsList":header-cell-style="{textAlign:'center',fontSize: '19px',background:'#eef1f6',color:'#606266'}"
                      :cell-style="{textAlign: 'center'}" height="600" class="aa3"
                      empty-text = "玉泉宫" :show-header="false">
              <el-table-column property="handBrand"  label="手牌号" width="200px">
                <template slot-scope="scope">
                  <div style="margin-top: 3px">{{ scope.row.index+1 }}</div>
                </template>
              </el-table-column>
              <el-table-column property="entryName" label="商品名称" width="200px">
                <template slot-scope="scope">
                  <div  style="margin-top: 3px">{{ scope.row.entryName }}</div>
                </template>
              </el-table-column>
              <el-table-column property="quantity" label="数量" width="200px">
                <template slot-scope="scope">
                  <div  style="margin-top: 3px" >{{ scope.row.quantity }}个</div>
                </template>
              </el-table-column>
              <el-table-column property="totalAmount" label="合计金额" width="200px">
                <template slot-scope="scope">
                  <div  style="margin-top: 3px" >{{ scope.row.totalAmount }}元</div>
                </template>
              </el-table-column>

            </el-table>
            <div class="shaocontainer">
            <el-button style="float: left" class="add_btn3" type="success" plain @click="addFormm">提交</el-button>
            </div>

          </el-drawer>


          <div class="shaodrawer" style="display: none;margin: 0px;padding: 0px;">
            <div id="printAre" class="shaoxiaopiaocard" :data="detailsList" style="width: 100%">
                    <span style="margin-top:15px;font-size: 40px;font-family: '楷体', KaiTi, serif;" >
                      玉泉宫欢迎您!
                    </span>
              <div style="margin-top:1px;border-top: 4px solid #ccc;"></div>
              <table style="width: 100%">
                <tr>
                  <td style="text-align: left;font-family: '楷体';width:50%">项目</td>
                  <td style="text-align: center;font-family: '楷体';width:25%">单价</td>
                  <td style="text-align: center;font-family: '楷体';width:25%">数量</td>
                </tr>
                <tr v-for="rows in detailsList" >
                  <td style="text-align: left;font-family: '楷体';">{{rows.entryName}}</td>
                  <td style="text-align: center;font-family: '楷体';">{{rows.unitPrice}}元</td>
                  <td style="text-align: center;font-family: '楷体';">{{rows.quantity}}个</td>
                </tr>
              </table>
              <div style="margin-top:1px;border-top: 4px solid #ccc;"></div>
              <div style="font-family: '楷体'" >当前日期:{{currentDate}}</div>
              <div style="font-family: '楷体'" >当前时间:{{currentDateTime}}</div>
              <div style="font-family: '楷体'" >地址:辽宁省锦州市凌河区靖东街杏花里13号玉泉宫温泉洗浴会馆</div>
              <div style="font-family: '楷体'" >电话:1234567890</div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-container>



</template>
<script>
  import { listDetails, getDetails, delDetails, addDetails, updateDetails } from "@/api/module/shao/details";
  import { listProject, getProject, listshaoProject} from "@/api/module/shao/project";
  import { listHands, gethands, delHands, addHands, updateHands } from "@/api/module/shao/hands";
  // import { listBaseinfo, getBaseinfo, delBaseinfo, addBaseinfo, updateBaseinfo } from "@/api/module/shao/baseinfo";
  import { listBills, getBills, delBills, addBills, updateBills,ppp } from "@/api/module/shao/bills";
  import Verify from "./Verify.vue";
  import printJS from 'print-js';
export default {
  props: ['passvalue'],
  name: "App",
  components: {
    Verify
  },
  data() {
    return {
      currentDate: new Date().toLocaleDateString(),
      zan:'',
      currentDateTime: '',
      //分页专用
      dayin:0,
      num: 1,
      centerDialogVisible: false,
      open: false,
      //软键盘
      show: false,
      index:'',
      handbrandnumber:'',
      name:'',
      e:'',
      mm:'',
      NUM: "",
      A:"",
      i:'',
      input: "",
      k:0,
      drawer: false,
      table: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 消费详细表格数据
      detailsList: [],
      // 吧台账单表格数据
      billsList: [],
      // 商品数据
      projectList:[],
      branchData:[],
      goodsList:[],
      branchDatayufugirl:[],
      //人员信息表数据
      personList:[],
      //手牌表数据
      handsList:[],
      //展示已点
      List1: {
        entryName: null,
        quantity:null,
        handBrand: null,
        handCategory: null,
        handState: null,
        lockedState: null,
        //库中数据字段为1才是商品
        projectCategory:null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 弹出层标题
      title: "",
      //查询项目信息表参数
      projectinformations:{
        pageNum: 1,
        pageSize: 21,
        entryName: null,
        //库中数据字段为1才是商品
        projectCategory:null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      loading:false,
      batai: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: null,
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: 1,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: null,
        note: null,
        groupNotes: null,
        discountAmount: null,
        checkoutTime: null,
        supplementaryConsumption: null,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      form2:{},
      // 人员信息表查询参数
      personinfo: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        nickName: null,
        userName: null,
        idNumber: null,
        sex: null,
        phone: null,
        post: null,
        department: null,
        personnelStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null
      },
      // 手牌表查询参数
      hands: {
        pageNum: 1,
        pageSize: 10,
        handBrand: null,
        handCategory: null,
        handState: null,
        lockedState: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.mm=1;
    this.handbrandnumber='';
    this.projectinformations.projectCategory='04';
    this.getprojectList();
  },
  mounted () {
    this.getRow5();
  },
  methods: {
    quxiao(){
      this.open=false;
    },
    queding(){
      var i=this.zan;
      console.log(i);
      this.detailsList[i].quantity = parseFloat(this.detailsList[i].quantity) + 1
      this.detailsList[i].totalAmount = this.detailsList[i].quantity * this.List1.unitPrice
      this.open=false;
    },
    hao(k){
      this.handbrandnumber=k;
      this.gethandList();
      this.getbataiList1();
      this.centerDialogVisible=false;
    },
    // 上一页
    shangyiye(){
      if(this.mm==1){
        this.projectinformations.pageNum -= 1;
        if (this.projectinformations.pageNum == 0) {
          this.$modal.msgError("第一页");
          this.projectinformations.pageNum = 1;
        }
        this.getprojectList();
      }
      if(this.mm==4){
        this.projectinformations.pageNum -= 1;
        if (this.projectinformations.pageNum == 0) {
          this.$modal.msgError("第一页");
          this.projectinformations3.pageNum = 1;
        }
        this.getprojectList();
      }
      if(this.mm==5){
        this.projectinformations.pageNum -= 1;
        if (this.projectinformations.pageNum == 0) {
          this.$modal.msgError("第一页");
          this.projectinformations.pageNum = 1;
        }
        this.getprojectList();
      }
      if(this.mm==6) {
        this.projectinformations.pageNum -= 1;
        if (this.projectinformations.pageNum == 0) {
          this.$modal.msgError("第一页");
          this.projectinformations.pageNum = 1;
        }
        this.getprojectList();
      }
    },
    // 下一页
    xiayiye(){
      if(this.mm==1){
       this.projectinformations.pageNum+=1;
        if(this.projectinformations.pageNum==3){
          this.$modal.msgError("最后一页了！");
          this.projectinformations.pageNum=2;
        }
        this.getprojectList();
      }
      if(this.mm==4){
        this.projectinformations.pageNum+=1;
        if(this.projectinformations.pageNum==3){
          this.$modal.msgError("最后一页了！");
          this.projectinformations.pageNum=2;
        }
        this.getprojectList();
      }
      if(this.mm==5){
        this.projectinformations.pageNum+=1;
        if(this.projectinformations.pageNum==3){
          this.$modal.msgError("最后一页了！");
          this.projectinformations.pageNum=2;
        }
        this.getprojectList();
      }
      if(this.mm==6){
      this.projectinformations.pageNum+=1;
      if(this.projectinformations.pageNum==5){
        this.$modal.msgError("最后一页了！");
         this.projectinformations.pageNum=4;
      }
      this.getprojectList();}
    },
    // 获取点击行的索引
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    rowStyle(row, rowIndex){
      if (this.currentRowId === row.id) {
        // 此处返回选中行的样式对象，按需设置
        return {
          'background-color': 'rgba(94,180,251,0.18)',
          'color': 'rgb(47,46,46)'
        }
      }
    },
    //减少商品数量
    jianshao(index){
      this.detailsList[index].quantity-=1;
      this.detailsList[index].totalAmount= this.detailsList[index].quantity * this.List1.unitPrice
      if(this.detailsList[index].quantity==0){
        this.detailsList.splice(index,1);
      }
    },
    handleChange(value) {
      console.log(value);
    },
    handleMessage(Num){
      this.zizujian=Num
    },
    // 查询订单
    check(){
      var A=this.handbrandnumber;
      if(A.length==0){
          this.$modal.msgError("未输入手牌号");
      }else{
      this.$router.push({path:'/yuquangong/4',query:{chuan:A}});}
    },
    //根据字段不同数字进行分类
    projectCateory04(e){
      this.mm=e;
      this.projectinformations.pageNum=1;
      this.projectinformations.firstLevelClassification=null;
      this.projectinformations.projectCategory='04';

      this.getprojectList();
    },
    projectCateory07(e){
      this.mm=e;
      this.projectinformations.pageNum=1;
      this.projectinformations.firstLevelClassification=null;
      this.projectinformations.projectCategory='07';
      this.getprojectList();
    },
    projectCateory05(e){
      this.mm=e;
      this.projectinformations.pageNum=1;
      this.projectinformations.firstLevelClassification=null;
      this.projectinformations.projectCategory='05';
      this.getprojectList();
    },
    projectCateory08(e){
      this.mm=e;
      this.projectinformations.pageNum=1;
      this.projectinformations.firstLevelClassification=null;
      this.projectinformations.projectCategory='08';
      this.getprojectList();
    },
    projectCateory10(e){
      this.mm=e;
      this.projectinformations.projectCategory=null;
      this.projectinformations.pageNum=1;
      this.projectinformations.firstLevelClassification='23';

      this.getprojectList();
    },
    projectCateorygirl(e){
      this.mm=e;
      this.projectinformations.projectCategory=null;
      this.projectinformations.pageNum=1;
      this.projectinformations.firstLevelClassification='22';
      this.getprojectList();
    },
    /** 查询吧台账单列表 */
    getbataiList1() {
      this.loading = true;
      this.resetbatai();
      this.batai.handBrand=this.handbrandnumber
      listBills(this.batai).then(response => {
        this.billsList = response.rows;
        if(this.billsList.length==0){
          this.$modal.msgError("该手牌不在台");
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询项目信息列表 */
    getprojectList() {
      this.loading = true;
      listshaoProject(this.projectinformations).then(response => {
        this.goodsList = response.rows;
        this.getRow5();
        this.total = response.total;
        this.loading = false;
      });
    },

    // /** 查询人员基础信息列表 */
    // getpersonList() {
    //   this.loading = true;
    //   listBaseinfo(this.personinfo).then(response => {
    //     this.personList = response.rows;
    //     console.log( this.personList );
    //     console.log(this.personList[0].nickName);
    // },
    /** 查询手牌基础信息列表 */
    gethandList() {
      this.loading = true;
      this.hands.handBrand=this.handbrandnumber;
      listHands(this.hands).then(response => {
        this.handsList = response.rows
        if(this.handsList.length==0){
          this.$modal.msgError("手牌号不存在");
        }else if(this.handsList[0].lockedState==0){
          this.$modal.msgError("该牌已被锁定");

        }

        this.total = response.total;
        this.loading = false;
      });
    },
     cancel() {
    this.open = false;
    this.reset();
    },
    // 查询吧台表的参数
    resetbatai() {
      this.batai = {
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: null,
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: 1,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: null,
        note: null,
        groupNotes: null,
        discountAmount: null,
        checkoutTime: null,
        supplementaryConsumption: null,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      }},
    reback(){
      //重置已点商品表单
      this.detailsList=[];
      //重置手牌表单
      this.getprojectList();
      this.handbrandnumber='';
    },
    //获取当前时间
    getCurrentTime() {
      const date = new Date();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      this.currentDateTime = `${hours}:${minutes}`;;
    },
    /** 添加商品不进库操作 */
    handleAdddetail(id) {
      this.hands.handbrand=this.handbrandnumber;
      if(this.handbrandnumber==''){
        this.$modal.msgError("未输入手牌号");
      }else if(this.handsList.length==0){
        this.$modal.msgError("手牌号不存在");
      }
      else if(this.handsList[0].lockedState==0){
        this.$modal.msgError("该牌已被锁定");
      }else if(this.billsList.length==0){
        this.$modal.msgError("手牌不在台");
      }else if(this.billsList[0].mergeStatus=="0"){
        this.$modal.msgError("手牌已被并牌");

      }else {
        getProject(id).then(response => {
          this.List1 = response.data;
          this.List1.handBrand = this.hands.handBrand;
          if (this.detailsList.length === 0) {
            this.detailsList.push({
              entryName: this.List1.entryName,
              handBrand: this.List1.handBrand,
              projectCategory: this.List1.projectCategory,
              projectCode: this.List1.projectCode,
              unitPrice:this.List1.unitPrice,
              quantity: 1,
              totalAmount: this.List1.unitPrice,
            })
          } else {
            for (let i = 0; i < this.detailsList.length; i++) {
              if (this.detailsList[i].entryName === this.List1.entryName) {
                this.open=true;
                this.zan=i;
                break;
              } else {
                if (i === this.detailsList.length - 1) {
                  this.detailsList.push({
                    entryName: this.List1.entryName,
                    handBrand: this.List1.handBrand,
                    projectCategory: this.List1.projectCategory,
                    projectCode: this.List1.projectCode,
                    // handState: this.List1.handState,
                    unitPrice:this.List1.unitPrice,
                    quantity: 1,
                    totalAmount: this.List1.unitPrice,
                  })
                  i++
                }
              }
            }
          }
        })

      }},



// 分包函数
    getRow5 () {
      let arr = [];
      let row = Math.ceil(this.goodsList.length / 3);
      //  行循环
      for (let i = 0; i < row; i++) {
        //  第i行的商品
        arr[i] = [];
        // modLast：最后一行的商品个数
        let modLast = this.goodsList.length % 3 === 0 ? 3 : this.goodsList.length % 3;
        // lastRow：判断当前循环是不是最后一行，是就让内层循环最后一行的商品个数，不是则默认5个
        let lastRow = i === (row - 1) ? modLast : 3;
        //  列循环
        for (let j = 0; j < lastRow; j++) {
          arr[i][j] = this.goodsList[3 * i + j];
        }
      }
      //  最后得到arr数组，将数组赋值给一个变量
      this.branchDatayufugirl= arr;
    },
    /** 新增消费详细表*/
    addFormm1(){
      "drawer = true"
    },
    addFormm() {
      this.resetbatai();
      this.batai.handBrand=this.handbrandnumber
      listBills(this.batai).then(response => {
        this.billsList = response.rows;
        this.total = response.total;
      })
      console.log("长度是"+this.detailsList.length)
      for(var k=0;k<this.detailsList.length;k++){
        this.detailsList[k].handState=this.billsList[0].handState;
      }
          if(this.detailsList.length>0){
          //批量插入
          for(var i=0;i<this.detailsList.length;i++){
            addDetails(this.detailsList[i]).then(response => {
            });
          }
          this.$modal.msgSuccess("点单成功");
            this.batai.handBrand=null;
            //重置已点商品表单
            this.detailsList=[];
            //重置手牌表单
            this.getprojectList();
            this.handbrandnumber='';
          //重置手牌表单
            this.batai=[];    // location.reload();
            this.table=false;
          }
          else
            this.$modal.msgError("未选择商品");
      this.table=false;

      const style = '@page {margin:0 1mm};'// 打印时去掉眉页眉尾
      //打印
      printJS({
        printable: printAre, // 'printFrom', // 标签元素id
        type: 'html',
        targetStyles: ['*'],
        page_size: "auto",
        style,
      })

    },
    },
}

</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@page {
  margin: 0px;
}

.allpage{
  margin-left: 5px;
}
.shaoboaside2 {
  margin-left: 5px;
  min-width: 50%;
  background: rgba(194,83,255,0);
}
.zhonglei{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.shaomain {
  margin-right: 10px;
  margin-top: 15px;
  width: 100%;
}
/*.shaoboaside2{
  height: 100%;
}*/
.position-fixed{
  position: inherit;
  margin-bottom: 5px;
  margin-top: 10px;
}
.listtable1{
  margin-right: 5px;
  margin-top: 1px;
  overflow-y: auto;
  overflow-x: hidden;
  position: inherit;
  font-size: 18px;
}
.aa3{
  margin-left: 20px;
  font-size: 25px;
  width: 100%;

}

.add_btn2{
  margin-left: 3px;
  margin-top: 9px;
  min-width: 160px;
  min-height: 80px;
  font-size: 20px;
  border: 3px solid #322d2d;
}

.first{
  margin-top: 30px;
  margin-left: 5px;
  /*margin-right: -10px;*/
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #ea0d0d;
  border-top:none;border-bottom:none;
}
.first2{
  margin-left: 5px;
  margin-top: 7px;
  /*margin-right: -18px;*/
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #eab30d;
  border-top:none;border-bottom:none;
}
.first3{
  margin-left: 5px;
  margin-top: 7px;
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #74ea0d;
  border-top:none;border-bottom:none;
}
.zhanshi{
  margin-left: -25px;
  height: 900px;
}
.buju{
  margin-top: 40px;
  width: 180px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.first4{
  margin-left: 5px;
  margin-top: 7px;
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #74ea0d;
  border-top:none;border-bottom:none;
}
.first5{
  margin-left: 5px;
  margin-top: 7px;
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #eab30d;
  border-top:none;border-bottom:none;
}
.first6{
  margin-left: 5px;
  margin-top: 7px;
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #ea0d0d;
  border-top:none;border-bottom:none;
}
.juzhong{
  line-height:80px;
  font-size: 22px;
}
.shaocontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}
.add_btn3{

  margin-top: 30px;
  min-width: 500px;
  min-height: 70px;
  right: 0px;
  font-size: 40px;

}
.button-list2 {
  text-align: center;
}
.shaoaside-content {
  display: flex; /* 设置弹性布局 */
  height: 100%;
}
.zuoce{
  margin-top: 10px;
  margin-bottom: 20px;

}

.shaoaside-left, .shaoaside-right {
  display: inline-block; /* 将 div 元素设置为行内块级元素 */
  height: 200px;
}
.shaoaside-left {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: -23px;
}
.shaoaside-right {
  margin-top: 7px;
  height: 400px;
  width: 35%;
}
.buttondiandan {
  font-size: 22px;
  border: 3px solid #9c26b0;

}
.queren{
  margin-top: 324px;
  margin-left:11px;
  font-size: 25px;
  width: 210px;
  height: 123px;
  border: 3px solid #322d2d;
}

.scroll1 {
  margin-right: 8px;
  height: 400px; /* 设置固定高度 */
  /*overflow-y: auto; !* 设置纵向滚动条 *!*/
  font-size: 25px;
  margin-top: 30px;

}
::-webkit-scrollbar{
  width: 0!important;
}
::-webkit-scrollbar{
  width: 0!important;height: 0;
}
  .num{
    position: relative;
    left: -350px;
    right: -100px;
    top: 0;
  }
  .m1{
    margin-left: 6px;
    margin-bottom: 20px;
  font-size: 20px;
  }
  .m{
    font-size: 20px;
  }
 .input{
   margin-top: 22px;
   font-size: 20px;
 }
.el-dialog-div1{
  height: 90vh;
overflow: auto;
}
.xiaopiaocontent1{
margin-left: 30px;
}

.dibu1{
  display: block;
}
.shuliang{
margin-left: 150px;
}
.drawerleft {
  float: left;
  width: 40%;
}

/*.shaodrawer {
  width: 100%;
}*/
.shaotanchu1{
  text-align: center;
  font-size: 60px;
  margin-top: 200px;
  height: 500px;
}
.shaobuttonqueding{
  margin-left: 70px;
  font-size: 40px;
  min-width: 300px;
  min-height: 100px;
  margin-top: 200px;
}
/*.shaoxiaopiaocard{
  font-size: 20px;
  height: 600px;
  width: 100%;
}*/

</style>

